import { View, Text, Image, Button } from "@tarojs/components";
import arrowRightIcon from "@/assets/images/arrow-right.png";
import { useEffect } from "react";
import Taro from "@tarojs/taro";
import { PAGE_PATH, RESPONSE_CODE, STORE_KEY } from "@/common/config";

import { handleCleanAllStore, handleLoginCallback } from "@/common/util";
import useProfileInfoAction from "@/hooks/useProfileInfoAction";
import './setting.scss'
import { IBindPhonePromise } from "@/typing";
import useSettingAction from "@/hooks/useSettingAction";

const Setting: React.FC = () => {
    const { handleBindMobilePhoneAjax } = useProfileInfoAction()
    const { setPhone,
        phone} =useSettingAction()
    let logoutTimeout;
   


    const handleBindPhone = async (phone) => {
        const phoneRes = await handleBindMobilePhoneAjax(phone) as IBindPhonePromise
        const { code, mobile, msg } = phoneRes
        if (code === RESPONSE_CODE.SUCCESS) {
            Taro.setStorageSync(STORE_KEY.PHONE, mobile)
            setPhone(mobile)

        } else if (code === RESPONSE_CODE.LOGIN_EXPIRE || code === RESPONSE_CODE.LOGIN_NEED) {
            handleLoginCallback(()=>handleBindPhone(phone))
            //  Taro.removeStorageSync(STORE_KEY.PHONE)
            // await handleInitLogin().then(async () => {
            //     handleBindPhone(phone)
            // })
        } else {
            Taro.showToast({
                title: msg,
                icon: 'none'
            })
        }



    }
    const handleEditPhone = async (e) => {

        const mobile = e.detail.code;
        if (mobile) {
            handleBindPhone(mobile)


        }
    }
    const handleLogout = () => {
        Taro.showModal({
            title: '提示',
            content: '确定要退出登录吗？',
            success: async function (res) {
                if (res.confirm) {
                    handleCleanAllStore();
                    logoutTimeout = setTimeout(() => {
                        Taro.reLaunch({
                            url: PAGE_PATH.LOGIN
                        })
                    }, 500);

                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })

    }
    const handleGoPrivacyPage=(pageEntry)=>{
        Taro.navigateTo({
            url: `${PAGE_PATH.PRIVACY}?pageEntry=${pageEntry}`
        })
    }
   
    
    useEffect(() => {
        
      
        return () => {
            clearTimeout(logoutTimeout)
        }
    }, [])
    return (
        <View className="min-h-100vh bg-#F6F6F6 pt-18px box-border">

            <View className="w-full box-border px-42px py-21px bg-#fff flex items-center justify-between text-#161618 text-32px">
                <Text >手机号</Text>

                <View className="flex-1 flex items-center justify-end">
                    <Text className="mr-10px" >{phone}</Text>
                    <Button className="setting-button bg-transparent text-#8232E8  text-32px mx-0 px-0 border-transparent" openType="getPhoneNumber" onGetPhoneNumber={(e) => handleEditPhone(e)}>修改</Button>
                </View>
            </View>
            <View className="text-#666666 px-42px py-26px box-border text-24px">此手机会被用来通话</View>
            <View className="bg-#fff">
                <View className="w-full box-border p-42px bg-#fff flex items-center justify-between text-#161618 text-32px " onClick={()=>handleGoPrivacyPage('privacy')}>
                    <Text >隐私政策</Text>

                    <Image src={arrowRightIcon} className="w-19px h-30px"></Image>
                </View>
                <View className="w-663px h-2px bg-#E9E9E9 mx-auto"></View>
                <View className="w-full box-border p-42px bg-#fff flex items-center justify-between text-#161618 text-32px " onClick={()=>handleGoPrivacyPage('service')}>
                    <Text >用户服务协议</Text>

                    <Image src={arrowRightIcon} className="w-19px h-30px"></Image>
                </View>
            </View>
            <View className="w-658px h-92px bg-#fff mx-auto mt-62px text-#333333 text-28px font-medium flex items-center justify-center" onClick={handleLogout}>退出登录</View>
        </View>
    );
}
export default Setting;